
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app" v-padding="20">
  <hr>
	<h2>DropdownCustom 自定义下拉控件</h2>
	<h-dropdowncustom class-name="h-text-dropdown">
	    <span>个人信息</span>
	    <div slot="content" v-width="200">
	      <div v-padding="20">
	        <img :width="80" :height="80" style="border-radius:80px;float:left" src="http://www.ch-un.com/images/head.jpg">
	        <div style="height:80px;margin-left:90px;line-height:80px;">LAN</div>
	      </div>
	      <h-row style="line-height:40px;border-top:1px solid #EEE;"><h-col width=12 class="text-center" style="border-right:1px solid #EEE;"><a>个人信息</a></h-col><h-col width=12 class="text-center"><a>注销</a></h-col></h-row>
	    </div>
	</h-dropdowncustom>
	<hr>
	<h2>DropdownMenu 下拉菜单</h2>
	<div>
	    <p><h-switch v-model="dropdisabled" :small="true">禁用</h-switch></p>
	    <h-dropdownmenu @click="trigger" :datas="dropparam" :disabled="dropdisabled" class-name="h-text-dropdown">
	      <span :disabled="disabled">菜单menu</span>
	    </h-dropdownmenu>
	</div>
	<hr>
	<div class="h-input-group" v-width="300">
	      <input type="text" v-model="text" placeholder="内容" /><Button @click="copyText" color="primary">复制</Button>
	    </div>
	    <div style="margin-top:10px">
	      <textarea v-model="textarea" cols="40" rows="3"></textarea>
	      <Button @click="textarea=''">清空</Button>
	    </div>
	</div>
	<hr>
    <p><h-button color="primary" @click="show = true">打开vue弹框</h-button></p>
    <p><h-button color="primary" @click="openModal">打开js弹框</h-button></p>
	<p><h-button @click="pageload">Vue 调用全局加载</h-button></p>
    <p>[普通选择日期控件]value:{{datevalue}}</p>
    <p><h-switch v-model="disabled" :small="true">禁用</h-switch></p>
    <p><h-switch v-model="readonly" :small="true">只读</h-switch></p>
    <p><h-switchlist v-model="datetype" :datas="{year: '年', month: '月', quarter: '季度', week: '周', date: '日'}"></h-switchlist></p>
    <p><h-datepicker v-model="datevalue" :readonly="readonly" :disabled="disabled" :type="datetype"></h-datepicker></p>
    <hr>
	<p>[滑块]对应的值：{{slidervalue}}</p>
	<p><h-slider v-model="slidervalue"></h-slider></p>
	<hr>
	<p>[评分]{{rateValue}}</p>
	<p><h-rate v-model="rateValue" show-text></h-rate></p>
	<hr>
	<p>[TagInput 标签输入]{{tagValue}}</p>
	<p><h-taginput v-model="tagValue"></h-taginput></p>
	<hr>
	<p>精确2位小数点：{{precisionValue}}</p>
	<p><h-numberinput v-model="precisionValue" :precision="2" v-width="300"></h-numberinput></p>

	<hr>
	<h2>Badge 徽标数</h2>
	<p>
		<h-buttongroup size="s">
		<h-button icon="h-icon-plus" @click="count++"></h-button>
      <h-button icon="h-icon-minus" @click="count<=0||count--"></h-button>
      </h-buttongroup>
      <!-- <i class="h-split"></i> -->
      <h-badge :count="count"><span >消息</span></h-badge>
	</p>
	<hr>
	<div v-width="600">
	<h2>Progress 进度条</h2>
	    <p><h-progress :percent="60"><span slot="title">项目1</span><span slot="text"><span class="primary-color">180</span> K</span></h-progress></p>
	    <p><h-progress :percent="99" color="green"><span slot="title">项目2</span><span slot="text">成功</span></h-progress></p>
	    <p><h-progress :percent="12" color="red"><span slot="title">项目2</span><span slot="text">失败</span></h-progress></p>
	</div>
	<hr>
	<h2>Circle 进度环</h2>
	<div>
	    <h-circle :percent="60"><span >项目1</span></h-circle>
	    <h-circle :percent="99" color="#13CE66"><span>项目2</span></h-circle>
	    <h-circle :percent="12" color="#E11617"><span>项目2</span></h-circle>
	</div>
	<hr>
	<h2>Steps 步骤条</h2>
	<div>
	    <p>
	      <h-buttongroup size="s">
	        <h-button icon="h-icon-plus" @click="step>=3||step++"></h-button>
	        <h-button icon="h-icon-minus" @click="step<=0||step--"></h-button>
	      </h-buttongroup>
	    </p>
	    <Steps :datas="dataStep" :step="step"></Steps>
	</div>
	<hr>
	<h2>SwitchList 选项</h2>
	<p v-color:gray>{{switchValue}}</p>
    <div><h-switchlist v-model="switchValue" :datas="param1"></h-switchlist>
    </div>
    <hr>
    <h2>Carousel 走马灯</h2>
	<div>
	    <p>切换到{{page}}</p>
	    <h-carousel :datas="params2" :height="300" pageTheme="circle" @change="change" @click="click"></h-carousel>
	</div>
	<hr>
	<h2>Collapse 折叠面板</h2>
	<div class="">
	    <h-collapse v-model="showvalue">
	      <h-collapseitem title="迈尔斯·莫拉莱斯">
	        终极宇宙里的蜘蛛侠，被一只放射性蜘蛛咬伤，并因此获得了超能力。偶然和其他宇宙的蜘蛛侠相遇，将和他们共同对抗最强反派。
	      </h-collapseitem>
	      <h-collapseitem title="彼得·帕克">
	        616宇宙的蜘蛛侠，他帮助训练迈尔斯·莫拉莱斯正视自己，勇于承担肩上的责任，在这期间也慢慢的找回自我。
	      </h-collapseitem>
	      <h-collapseitem title="格温·史黛西">
	        我是她是一个非常聪明、反应极快的女孩儿，能够以宛如舞者般优雅的身姿穿梭往来，是她所属那个世界的蜘蛛侠。
	      </h-collapseitem>
	    </h-collapse>
	</div>
	

    

    <Modal v-model="show">
      <div slot="header">标题</div>
      <div>
        这是一个vue调用的弹框
      </div>
      <div slot="footer">
        <h-button @click="show=false">取消</h-button>
      </div>
    </Modal>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/heyui"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/heyui/themes/index.css">
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!',
      show: false,
      datevalue:'2017-01-01',
      disabled: false,
      readonly: false,
      datetype: 'date',
      slidervalue: 20,
      rateValue: 3,
      tagValue: ['test1'],
      precisionValue: 0,
      operationValue: 3,
      count: 2,
      dataStep: {
        a: 'step1',
        b: 'step2',
        c: 'step3',
        d: 'step4',
      },
      step: 0,
      switchValue: '选择1',
      param1: ['选择1', '选择2', '选择3'],
      page: 'Page 1',
      params2:[
        {
          title:'Page 1',
          link: true,
          image:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540197899055&di=75c86ca282306c46d9de3dccac8f5e0b&imgtype=0&src=http%3A%2F%2Fimg17.3lian.com%2Fd%2Ffile%2F201702%2F27%2Fd27cb266e19ab3e5ecffa2bd8c8e9426.jpg',
        },{
          title:'Page 2',
          link: 'http://www.baidu.com',
          image:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540197899054&di=3367ff0605072bc351651cfffb8dac08&imgtype=0&src=http%3A%2F%2Fimg534.ph.126.net%2FEGAn7UXOMIr5XJ7HWEUylw%3D%3D%2F2650649855685047930.jpg',
        },{
          title:'Page 3',
          image:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=436156375,527884653&fm=27&gp=0.jpg',
        },{
          title:'Page 4',
          image:'http://pic.58pic.com/58pic/14/48/31/98R58PICUsm_1024.jpg',
        },
      ],
      showvalue: [0],
      dropparam: ["测试1", "测试2", "测试3"],
      dropdisabled: false,
      text: '',
      textarea: '',
    },
    methods: {
      openModal() {
        this.$Modal({
          title: '标题',
          content: '这是一个js调用的弹框'
        })
      },
	    change(index, data){
	      this.page = data.title;
	    },
	    click(index, data){
	      this.$Message(`点击了${data.title}`);
	    },
	     trigger(code, data, event) {
	      this.$Message.info(`您点击了${code}`);
	      log(data, event)
	    },
	    pageload() {
	      this.$Loading("加载中...");
	      setTimeout(() => {
	        this.$Loading.close();
	      }, 3000);
	    },
	    copyText() {
		    this.$Clipboard({
		      text: this.text
		    });
		},
		copy() {
		    this.$Clipboard({
		      text: '测试==复制至剪切板的文本==测试',
		      showSuccessTip: 'Copy Success',
		    });
		}

    }
  })
</script>
</html>